<link rel="stylesheet" href="lib/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">
    .layui-layer-content {
        overflow: visible !important;
    }

    .form-box {
        padding: 20px 20px 0 0;
    }

    .options {
        height: 28px;
        line-height: 28px;
        margin-top: 15px;
    }

    .options span {
        font-size: 18px;
    }

    .options label {
        cursor: pointer;
        font-size: 16px;
        margin-right: 20px;
    }

    .options input[type='checkbox'] {
        position: relative;
        top: 2px;
        width: 16px;
        height: 16px;
    }
</style>
<div class="layui-anim layui-anim-downbit">
    <button class="layui-btn layui-btn-sm" lay-active="addNodes">新增节点</button>
    <button class="layui-btn layui-btn-sm" lay-active="updateNodes">修改操作项属性</button>
    <button class="layui-btn layui-btn-primary layui-btn-sm" lay-active="refreshTree">刷新</button>
    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-active="fold">全部展开</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-active="unfold">全部收起</button>
</div>
<hr>
<div class="layui-col-space5">
    <div class="layui-col-lg3">
        <div class="layui-anim layui-anim-downbit" style="height: 760px;overflow: auto;">
            <ul id="tree-container" class="ztree"></ul>
        </div>
    </div>
    <div class="layui-col-lg9">
        <div id="app" style="padding-left:15px;">
            <div class="options" id="roleOptions">
                <span>角色权限：</span>
                <input type="checkbox" v-model="roles" id="bid" name="roleData" value="1">
                <label for="bid">招标人/采购人</label>
                <input type="checkbox" v-model="roles" id="prop" name="roleData" value="2">
                <label for="prop">投标人/供应商</label>
                <input type="checkbox" v-model="roles" id="proxy" name="roleData" value="3">
                <label for="proxy">代理机构</label>
            </div>
            <div class="options" id="bidWayOptions">
                <span>项目类型：</span>
                <input type="checkbox" v-model="bidWays" id="bid2" name="bidWayData" value="1">
                <label for="bid2">招标</label>
                <input type="checkbox" v-model="bidWays" id="inq" name="bidWayData" value="7">
                <label for="inq">询价</label>
                <input type="checkbox" v-model="bidWays" id="neg" name="bidWayData" value="3">
                <label for="neg">竞争性谈判</label>
                <input type="checkbox" v-model="bidWays" id="con" name="bidWayData" value="2">
                <label for="con">竞争性磋商</label>
                <input type="checkbox" v-model="bidWays" id="single" name="bidWayData" value="5">
                <label for="single">单一来源</label>

                <!--<input type="checkbox" v-model="bidWays" id="com" name="bidWayData" value="8">
                <label for="com">竞价</label>
                <input type="checkbox" v-model="bidWays" id="direct" name="bidWayData" value="6">
                <label for="direct">直接采购</label>
                <input type="checkbox" v-model="bidWays" id="frame" name="bidWayData" value="7">
                <label for="frame">框架协议</label>-->
            </div>
            <div class="options">
                <button class="layui-btn layui-btn-sm layui-btn-normal"
                        type="button"
                        @click="saveRolesAndBidWays">保存
                </button>
            </div>
        </div>
    </div>
</div>

<script id="item-form" type="text/html">
    <div class="form-box">
        <form id="form-item" lay-filter="formItem" class="layui-form">
            <input type="hidden" name="id" value="{{ d.id || '' }}"/>
            {{# if (d.parentId) { }}
            <input type="hidden" name="parentId" value="{{ d.parentId }}"/>
            <div class="layui-form-item">
                <label class="layui-form-label required">父级项：</label>
                <div class="layui-input-block">
                    <input type="text" name="parentName" lay-verify="required" placeholder="父级项"
                           class="layui-input layui-disabled" disabled value="{{ d.parentName }}"/>
                </div>
            </div>
            {{# } }}
            <div class="layui-form-item">
                <label class="layui-form-label required">操作项：</label>
                <div class="layui-input-block">
                    <input type="text" name="operaName" lay-verify="required" placeholder="请输入操作项名称"
                           class="layui-input" value="{{ d.operaName || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">icon图标：</label>
                <div class="layui-input-block">
                    <input type="text" name="iconType" placeholder="icon图标"
                           class="layui-input" value="{{ d.iconType || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">跳转地址：</label>
                <div class="layui-input-block">
                    <input type="text" name="pageUrl" placeholder="跳转地址"
                           class="layui-input" value="{{ d.pageUrl || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">Bean：</label>
                <div class="layui-input-block">
                    <input type="text" name="showStatusLogic" placeholder="程序中显示判断的逻辑的 java bean"
                           class="layui-input" value="{{ d.showStatusLogic || '' }}"/>
                </div>
            </div>
        </form>
    </div>
</script>

<script type="text/javascript" src="lib/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="lib/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="lib/vue/vue.min.js"></script>

<script type="text/javascript">
    layui.use(['form', 'laytpl', 'util'], function () {
        let form = layui.form;
        let laytpl = layui.laytpl;
        let util = layui.util;

        var treeObj;

        let active = {
            refreshTree: function () {
                treeObj.reAsyncChildNodes(null, "refresh");
                setTimeout(() => {
                    active.fold();
                }, 120);
            },
            fold: function () {
                treeObj.expandAll(true);
            },
            unfold: function () {
                treeObj.expandAll(false);
            },
            updateNodes: function () {
                var nodes = treeObj.getSelectedNodes();

                if (nodes.length) {
                    var node = nodes[0];
                    var parentNode = treeObj.getNodeByTId(node.parentTId);
                    if (parentNode) {
                        node.parentName = parentNode.operaName;
                    } else {
                        node.parentName = '所有操作项';
                    }
                    let tpl = document.getElementById("item-form").innerHTML;
                    laytpl(tpl).render(node, function (html) {
                        layer.open({
                            type: 1,
                            content: html,
                            title: '修改操作项',
                            area: ['435px', '400px'],
                            maxmin: false,
                            shade: 0.3,
                            btn: ['确定', '取消'],
                            yes: function (index, layero, openNew) {
                                request.bodyAjax(api.update, form.val('formItem'), function (res) {
                                    if (res.status === 200) {
                                        layer.close(index);
                                        active.refreshTree();
                                    }
                                    layer.msg(res.message);
                                });
                                return false;
                            }
                        });
                    });
                    return form.render();
                }

            },
            addNodes: function () {
                let nodes = treeObj.getSelectedNodes();

                let data = {};
                if (nodes.length) {
                    data.parentId = nodes[0].id;
                    data.parentName = nodes[0].operaName;
                } else {
                    data.parentId = 1;
                    data.parentName = '所有操作项';
                }

                let tpl = document.getElementById("item-form").innerHTML;
                laytpl(tpl).render(data, function (html) {
                    layer.open({
                        type: 1,
                        content: html,
                        title: '添加操作项',
                        area: ['435px', '400px'],
                        maxmin: false,
                        shade: 0.3,
                        btn: ['确定', '保存并添加下一条', '取消'],
                        yes: function (index, layero, openNew) {
                            request.bodyAjax(api.addConsoleItem, form.val('formItem'), function (res) {
                                if (res.status === 200) {
                                    active.refreshTree();
                                    if (openNew) {
                                        form.val('formItem', {
                                            id: '',
                                            operaName: '',
                                            iconType: '',
                                            pageUrl: ''
                                        });
                                    } else {
                                        layer.close(index);
                                    }
                                }
                                layer.msg(res.message);
                            });
                            return false;
                        },
                        btn2: function (index, layero) {
                            return this.yes(index, layero, true);
                        }
                    });
                });
                return form.render();
            },
            updateItemRolesAndBidWays: function (itemId, roleType, bidWay) {
                request.postAjax(api.updateItemRolesAndBidWays, {
                    itemId: itemId,
                    roleTypes: roleType,
                    bidWays: bidWay
                }, function (res) {
                    layer.msg(res.message, {icon: res.status === 200 ? 1 : 2});
                });
            }
        };

        let vm = new Vue({
            el: '#app',
            data: {
                roles: [],
                bidWays: []
            },
            methods: {
                saveRolesAndBidWays: function () {
                    let nodes = treeObj.getSelectedNodes();
                    if (nodes.length) {
                        active.updateItemRolesAndBidWays(nodes[0].id, this.roles.join(','), this.bidWays.join(','));
                    }
                }
            }
        });

        util.event('lay-active', active);

        form.on('checkbox(bid)', (data) => {
            active.updateItemRoles(data.value, data.elem.checked);
        });

        form.on('checkbox(prop)', function (data) {
            active.updateItemRoles(data.value, data.elem.checked);
        });

        form.on('checkbox(proxy)', function (data) {
            active.updateItemRoles(data.value, data.elem.checked);
        });

        let setting = {
            async: {
                enable: true,
                contentType: 'application/json',
                url: api.consoleItemList,
                dataFilter: function (treeId, parentNode, responseData) {
                    return responseData.data;
                }
            },
            data: {
                key: {
                    name: 'operaName'
                },
                simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: 'parentId'
                }
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: {"Y": "ps", "N": "ps"}
            },
            edit: {
                enable: true,
                showRemoveBtn: true,
                showRenameBtn: true
            },
            view: {
                dblClickExpand: false,
                nameIsHTML: true,
                fontCss: function (treeId, treeNode) {
                    return treeNode.showStatusLogic ? {color: "green"} : {};
                }
            },
            callback: {
                onDrop: function (event, treeId, treeNodes, targetNode, moveType) {
                    request.bodyAjax(api.transferTo, {
                        id: treeNodes[0].id,
                        targetId: targetNode.id,
                        moveType: moveType
                    }, function () {
                    });
                },
                onRename: function (event, treeId, treeNode, isCancel) {
                    if (isCancel) {
                        return;
                    }
                    request.bodyAjax(api.update, {id: treeNode.id, operaName: treeNode.operaName}, function () {
                    });
                },
                beforeRemove: function (treeId, treeNode) {
                    return confirm('确定删除 [' + treeNode.operaName + ']？')
                },
                onDblClick: function (event, treeId, treeNode) {
                    active.updateNodes();
                },
                onClick: function (event, treeId, treeNode) {
                    request.postAjax(api.getRoleSignsAndBidWay, {consoleItemId: treeNode.id}, function (res) {
                        vm.roles = [];
                        vm.bidWays = [];
                        if (res.status === 200) {
                            if (res.data.roleSigns) {
                                vm.roles = res.data.roleSigns.split(',');
                            }
                            if (res.data.bidWays) {
                                vm.bidWays = res.data.bidWays.split(',');
                            }
                        }
                    });
                },
                onRemove: function (event, treeId, treeNode) {
                    request.bodyAjax(api.delete, treeNode, function (res) {
                        if (res.status === 200) {
                        }
                    });
                },
                onAsyncSuccess: function () {
                    active.fold();
                }
            }
        };

        treeObj = $.fn.zTree.init($('#tree-container'), setting);
    });
</script>
